<template>
	<div>
		<el-form
			ref="crmForm"
			:model="formData"
			label-width="135px"
			:rules="CrmRules"
			label-position="top">
			<el-col
				v-for="(item,index) in FieldList"
				:key="index"
				:span="(item.form_type == 'textarea' || item.form_type == 'file') ? 22 : 11">
				<el-form-item
					:label="item.name" 
					:prop="item.field">
					<template v-if="item.form_type == 'text'">
						<el-input 
							v-model="formData[item.field]" 
							class="forminput"
							:placeholder="item.input_tips">
						</el-input>
					</template>
					<!-- select单选框 -->
					<template v-if="item.form_type == 'select'">
						<el-select 
							v-model="formData[item.field]" 
							filterable 
							clearable 
							:placeholder="item.input_tips"
							value-key="field"
							class="forminput">
							<el-option
								v-for="(fieldItem,fieldIndex) in item.setting" 
								:key="fieldIndex" 
								:label="fieldItem" 
								:value="fieldItem">
							</el-option>
						</el-select>
					</template>
					<!-- select多选框 -->
					<template v-if="item.form_type == 'select-multiple'">
						<el-select 
							v-model="formData[item.field]" 
							filterable 
							multiple 
							:placeholder="item.input_tips"
							class="forminput">
							<el-option
								v-for="(fieldItem,fieldIndex) in item.setting" 
								:key="fieldIndex" 
								:label="fieldItem" 
								:value="fieldItem">
							</el-option>
						</el-select>
					</template>
					<!-- Cascader 级联选择器 -->
					<template v-if="item.form_type == 'cascader'">
						<el-cascader :options="item.setting" clearable></el-cascader>
					</template>
					<!-- textarea文本框 -->
					<template v-if="item.form_type == 'textarea'">
						<el-input 
							v-model="formData[item.field]" 
							type="textarea" 
							style="width: 530px;"
							:rows="1"
							autosize
							:placeholder="item.input_tips">
						</el-input>
					</template>
					<!-- 带小数点数字文本框 -->
					<template v-if="item.form_type == 'float'">
						<el-input 
							type="number" 
							step='0.01'
							v-model="formData[item.field]" 
							class="forminput"
							:placeholder="item.input_tips">
						</el-input>
					</template>
					<!-- 带小数点金额文本框 -->
					<template v-if="item.form_type == 'money'">
						<el-input 
							type="number" 
							step='0.01'
							v-model="formData[item.field]" 
							class="forminput"
							:placeholder="item.input_tips">
							<template slot="append">元</template>
						</el-input>
					</template>
					<!-- 带小数点金额文本框 -->
					<template v-if="item.form_type == 'per'">
						<el-input 
							type="number" 
							step='0.01'
							v-model="formData[item.field]" 
							class="forminput"
							:placeholder="item.input_tips">
							<template slot="append">%</template>
						</el-input>
					</template>
					<!-- date日期选项 -->
					<template v-if="item.form_type == 'date'">
						<el-date-picker
							class="forminput datecss"
							v-model="formData[item.field]"
							type="date"
							:placeholder="item.input_tips"
							value-format="yyyy-MM-dd">
						</el-date-picker>
					</template>
					<template v-if="item.form_type == 'datetime'">
						<el-date-picker
							class="forminput datecss"
							v-model="formData[item.field]"
							type="datetime"
							:placeholder="item.input_tips"
							value-format="yyyy-MM-dd HH:mm">
						</el-date-picker>
					</template>
					<!-- 用户选择 -->
					<template v-if="item.form_type == 'user'">
						<xh-user-cell
							:item="item"
							:index="index"
							:value="formData['user_'+item.field]"
							@value-change="arrayValueChange"/>
					</template>
					<template v-if="item.form_type == 'user-multiple'">
						<xh-user-cell
							class="forminput"
							:item="item"
							:index="index"
							:radio="false"
							:value="formData['user_'+item.field]"
							@value-change="arrayValueChange"/>
					</template>
					<!-- 附件 -->
					<template v-if="item.form_type == 'file'">
						<file-upload
							:field="item.field"
							:model-name="crmType"
							:fileinfo="formData[item.field]"
							@uploadFile="uploadFile"/>
					</template>
					<!-- 电话 -->
					<template v-if="item.form_type == 'mobile'">
						<el-input 
							placeholder="请输入手机号吗"
							v-model="formData[item.field]" 
							style="width: 200px;">
							<!-- <el-button 
								slot="append" 
								@click="checkphone"
								icon="el-icon-search">验重</el-button> -->
						</el-input>
					</template>
					<template v-if="item.form_type == 'dialog'">
						<crm-relative-cell
							:value="relationInfo.value"
							:index="0"
							:item="relationInfo"
							:crm-type="item.field"
							:radio="true"
							:disabled="relationInfo.disabled"
							@value-change="fieldValueChange"/>
					</template>	
				</el-form-item>
			</el-col>
			<slot></slot>
		</el-form>
	</div>
</template>

<script>
	import { XhUserCell } from '@/components/user'
	import { mapGetters } from 'vuex'
	import FileUpload from "./FileUpload"
	import CrmRelativeCell from '@/components/table/CrmRelativeCell'
	// API
	import { checkPhone } from '@/api/customer/customer'
	export default {
		computed: {
		  ...mapGetters(['userInfo'])
		},
		components: {
		  XhUserCell,
		  FileUpload,
		  CrmRelativeCell
		},
		props:{
			FieldList:{
				type:Array,
				default:()=>{
					return []
				}
			},
			CrmRules:{
				type:Object,
				default:()=>{}
			},
			formData:{
				type:Object,
				default:()=>{}
			},
			crmType:{
				type:String,
				default:''
			},
			action:{
				type:String,
				default:''
			},
		},
		data(){
			return{
				userArr:{
					user_owner_user_id:[]
				},
				// 关联信息
				relationInfo:{
					default_value:"",
					form_type:this.crmType,
					name:"",
					types:"",
					value:[],
					disabled:false
				}
			}
		},
		watch: {
			crmType: function(value) {
				if(this.formData['dialog_'+value]){
					this.relationInfo.value = this.formData['dialog_'+value]
				}else{
					this.relationInfo.value = []
				}
			}
		},
		mounted() {
			if(this.formData['dialog_'+this.crmType]){
				this.relationInfo.value = this.formData['dialog_'+this.crmType]
			}
		},
		methods:{
			/**
			 * 用户
			 */
			arrayValueChange(data) {
				// if (data.value.length > 0) {
				// 	let arr = []
				// 	for(let i=0;i<data.value.length;i++){
				// 		arr.push(data.value[i].id)
				// 	}
				// 	this.formData[data.item.field] = arr.join(',')
				// } else {
				// 	this.formData[data.item.field] = ''
				// }
				
				if (data.value.length > 0) {
					let arr = []
					this.formData['user_'+data.item.field] = data.value
				} else {
					this.formData['user_'+data.item.field] = []
				}
			},
			
			validateForm() {
				let flag = false
				this.$refs['crmForm'].validate((valid) => {
					if(!valid){
						flag = false
					}else{
						flag = true
					}
				})
				return {
					flag:flag,
					data:this.formData
				}
			},
			
			// 附件上传
			uploadFile(file_ids,field){
				this.$set(this.formData,field,file_ids)
			},
			
			checkphone(){
				if (!this.formData.telephone) return
				checkPhone({
					telephone: this.formData.telephone
				}).then(res => {
					let result = res.data
					if (result != null) {
						this.$alert('登记人：' + result.create_user_info + '；登记时间：' + result.create_time, '该号码已被登记', {
							confirmButtonText: '确定',
							callback: action => {}
						})
					}
				})
			},
			
			// 选中关联信息
			fieldValueChange(data) {
				if(!data.value.length) return this.formData[data.type] = ''
				this.$set(this.formData,data.type,data.value[0].id)
			}
		}
	}
</script>

<style scoped="scoped">
	.forminput{
		width: 200px;
	}
	/deep/ .el-form-item__content{
		display: inline-block;
		line-height: 40px;
		width: 200px;
	}
	/deep/ .el-input__inner {
	    height: 40px;
	    line-height: 40px;
	    outline: none;
	    padding: 0 15px;
	}
	/deep/ .el-form--label-top .el-form-item__label {
		padding:0 10px 0 0;
	}
	/deep/ .el-form-item {
	    margin-bottom: 23px !important;
		position: relative;
	}
	/deep/ .el-form-item__label {
	    text-align: left !important;
	    vertical-align: middle !important;
	    float: left;
	    font-size: 14px;
	    color: #606266;
	    line-height: 40px !important;
	    padding: 0 12px 0 0;
	    box-sizing: border-box;
		width: 95px !important;
	}
	/deep/ .el-form-item__content {
		width: auto !important;
	}
	/deep/ .el-textarea__inner{
		min-height: 40px !important;
		line-height: 40px !important;
		padding: 0 15px !important;
	}
	
	.el-col-11 {
	    /* height: 100px; */
	}
	
	.datecss /deep/ .el-input__inner {
	    padding: 0 15px 0 25px !important;
	}
	.card-base{
		border-left: 5px solid #3A8EE6;
		height: 15px;
		padding-left: 10px;
		margin:0 0 20px 0
	}
	
</style>
